Para convertir una conversacion de whatsapp a pdf lo vamos a hacer desde la aplicacion web de whatsapp, primero entramos en la web (web.whatsapp.com) y sincronizamos el movil para acceder a los chats
Una vez dentro del chat que queramos convertir a pdf entramos en la consola de desarroladores, podemos hacerlo de dos maneras:
- Pulsando Ctrl + Mayus + I
O bien:
- hacemos click derecho en el margen exterior del chat
- En el menu desplegable hacemos click en "Inspeccionar"
- Es importante hacer click en el margen exterior, si no se nos mostrara el menu contextual del whatsapp y no el menu contextual del navegador (es la zona marcada en rojo en la siguiente imagen).
Una vez abierta la consola de desarrolladores:
- hacemos click en la etiqueta <body class="web">
- en la lista de la derecha buscamos la reglas aplicadas a "#app, body, html "
Ahora hacemos lo siguiente:
- Desmarcamos el overflow: hidden
- Cambiamos el valor height, en vez de 100% ponemos un valor muy grande en px, esto depende de lo largo que vaya a ser el chat, en mi caso voy a poner 10000px (este valor podemos ajustarlo mas tarde en funcion de lo que necesitemos)
Una vez hecho esto veremos que la conversacion se ha ido muy muy abajo, de la pantalla y el resto esta vacio, esto lo usaremos despues para rellenar el espacio vacio con el resto de la conversacion.
A continuacion tenemos que:
- Eliminar la columna donde aparecen todos los chats solo tenemos que ir pasando el cursor por las lineas de codigo (e ir expandiendo todas las etiquetas) hasta que una linea de codigo nos ilumine de azul la columna de chats, hacemos click derecho y le damos a eliminar este elemento
- Tambien podemos buscar la clase con el nombre "_1Flk2 _2DPZK _1pQBW" que deberia de ser siempre la que contiene la columna de chats (no estoy seguro de que sea asi)
A continuacion
- buscamos el elemento de la cabecera del chat de la misma manera que con la columna de chats, vamos pasando el raton por las lineas de codigo hasta que se ilumine de azul la cabecera del chat donde sale el nombre del contacto
- Tambien podemos buscar la clase "_1-qgF" que deberia de ser la clase que contiene la cabecera
Y cambiamos el valor del width (que esta puesto a 100%) a un valor en px, por lo general algo menor al tamaño de la pantalla, en mi caso voy a poner 1900px.
En este momento ya podemos cerrar la consola de desarroladores si queremos.
Ahora lo que tenemos es una pantalla con el chat aparentemente vacio:
Lo unico que tenemos que hacer es scroll hasta abajo de todo, cuando lleguemos abajo veremos que nos aparece los ultimos mensajes del chat y arriba un icono de una flecha para cargar mas mensajes
Tenemos que hacer click en ese icono de la flecha para que vaya cargando los mensajes mas antiguos, hasta que carge todo lo que queremos, hay que tener cuidado de no sobrepasar el limite superior del chat, lo mas optimo seria dejar el icono de la flecha de actualizacion justo al limite de la cabecera del chat, tal que asi:
En esa imagen podemos ver que la flecha de actualizacion esta justo debajo de la cabecera del chat, si en ese caso se vuelve a pulsar el icono de la flecha para cargar mas mensajes, nos encontraremos con esto:
Como se puede ver en la imagen al cargar mas mensajes de los que caben en la totalidad del chat se genera un scrollbar a la derecha, esto es importante, ya que si ocurre esto al final no nos apareceran los mensajes mas recientes del chat en el pdf final que generemos, los mensajes que deberian de aparecer abajo del todo quedan tapados (esto podemos revisarlo en la vista previa antes de generar el pdf para ver si se ve todo lo que queremos que se vea.
Si vemos que superamos el limite superior y aparece ese scrollbar tendremos que volver a la consola de desarrollador y aumentar el valor que le hayamos puesto al heightt de la etiqueta <body class="web"> (yo inicialmente le habia puesto 10000px), de esa manera vamos ajustando el valor para que el heightt sea mas o menos la totalidad de todos los mensajes que tenemos cargados (podemos ir probando con incrementos de 5000px para ver como va quedando, una buena cifra para empezar es 10000px, despues probar con 15000px...etc, ya que si nos quedamos cortos tendremos el problema de que los mensajes mas recientes no apareceran en el pdf final, y si nos pasamos y ponemos un heightt muy grande nos quedaremos con un espacio en blanco (sin ninfun mensaje) al principio del pdf, como regla general debemos de dejar el icono de la flecha de actualizacion los mas cerca de la cabecera del chat.
Una vez hayamos cargado todos los mensajes que queramos que se vean en el pdf y ajustado el heightt, solo tenemos que utilizar la opcion de imprimir del navegador para generar un archivo pdf en el que se guarde toda la conversacion.
Una vez estemos en la pantalla de vista previa es importante revisar que se ven correctamente todos los mensajes, sobre todo los que estan abajo del todo, si hay alguno que no se llega a ver habra que volver a la consola de desarrolladores para ajustar el heightt de la etiqueta <body class="web">
Si estamos contentos con la vista previa podemos exportarlo a un archivo pdf, para obtener una version mas bonita seleccionamos estas opciones:
- Destino: Guardar como PDF (si no seleccionas esta opcion se intentara imprimir en una impresora que tengas conectada
- Margenes: Ninguno (esta opcion elimina los margenes de la pagina haciendo que las imagenes entre paginas sean mas continuas
- Marcar Graficos de fondo (esta opcion cargara las imagenes de fondo del whatsapp
